<template>
  <div class="GNotificationDetail">
    <zyInfoPanel title="新增消息通知" :showUnfoldButton="false" class="baseInfo">
      <div class="infoBox">
        <div class="infoItem">
          <div class="infoItemTitle " :class="!disabled?'required':''">标题</div>
          <div class="infoItemContent">
            <zy-input placeholder="请输入标题" maxlength="200" v-model="title" :disabled="disabled"></zy-input>
          </div>
        </div>
        <div class="infoItem">
          <div class="infoItemTitle" :class="!disabled?'required':''">发布人</div>
          <div class="infoItemContent">{{getUserName}}</div>
        </div>
        <div class="infoItem">
          <div class="infoItemTitle " :class="!disabled?'required':''">提示方式</div>
          <div class="infoItemContent">
            <el-radio-group v-model="prompt_mode" :disabled="disabled">
              <el-radio :label="1">首次登录</el-radio>
              <el-radio :label="2">每次登录</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="infoItem pushTarget">
          <div class="infoItemTitle " :class="!disabled?'required':''">发布对象</div>
          <div class="infoItemContent">
            <el-checkbox v-model="checkAll" :disabled="disabled" @change="selectAll">全部</el-checkbox>
            <el-checkbox-group v-model="target" :disabled="disabled" @change="selectTarget">
              <el-checkbox v-for="item in pushTargetList" :label="item.label">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="infoItem">
          <div class="infoItemTitle " :class="!disabled?'required':''">发布时间</div>
          <div class="infoItemContent">
            <datePicker v-model="time" type="daterange" :disabled="disabled"
                        :pickerOptions="pickerOptions"></datePicker>
          </div>
        </div>
        <div class="infoItem desc">
          <div class="infoItemTitle " :class="!disabled?'required':''">正文</div>
          <div class="infoItemContent">
            <!--          <quill-editor class="editor" v-model="info.desc" ref="myQuillEditor" :disabled="disabled"-->
            <!--                        :options="editorOption"></quill-editor>-->
            <zyEditor class="editor" v-model="content" :disabled="disabled" :toolbarOptions="toolbarOptions"
                      :placeholder="`您想说点什么？`"></zyEditor>
          </div>
        </div>
        <div class="infoItem btnArea">
          <div class="infoItemTitle"></div>
          <div class="infoItemContent">
            <zy-button class="btn" @click="back">返回</zy-button>
            <zy-button class="btn" type="primary" @click="submitInformationManage">确定
            </zy-button>
          </div>
        </div>
      </div>
    </zyInfoPanel>
  </div>
</template>

<script>
	import {mapGetters} from 'vuex'
	import datePicker from "@/components/datePicker/index";

	const publishList = ['logistics_enterprise', 'cooperative_site', 'pull_end', 'sender_side', 'regulatory', 'police', 'security'];
	export default {
		name: "GNotificationDetail",
		props: {},
		data() {
			return {
				// target 发布对象
				// 发布对象，all:全部,
				// logistics_enterprise:物流企业,
				// cooperative_site:合作站点,
				// pull_end:揽件端
				// sender_side:寄件端,
				// regulatory:监管辖区,
				// police:管民警,
				// security:公安web端
				pushTargetList: [
					{name: '物流企业', label: 'logistics_enterprise'},
					{name: '合作站点', label: 'cooperative_site'},
					{name: '揽件端', label: 'pull_end'},
					{name: '寄件端', label: 'sender_side'},
					{name: '监管辖区', label: 'regulatory'},
					{name: '监管民警', label: 'police'},
					{name: '公安web端', label: 'security'},
				],
				title: '',
				prompt_mode: '',
				target: [],
				time: [],
				content: '',
				status: '1',
				release_user_name: '',
				disabled: false,
				checkAll: false,
				logs: [],
				reason: '',
				toolbarOptions: [
					["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
					//   ["blockquote", "code-block"], // 引用  代码块
					[{header: 1}, {header: 2}], // 1、2 级标题
					[{list: "ordered"}, {list: "bullet"}], // 有序、无序列表
					//   [{ script: "sub" }, { script: "super" }], // 上标/下标
					[{indent: "-1"}, {indent: "+1"}], // 缩进
					// [{'direction': 'rtl'}],                         // 文本方向
					[{size: ["small", false, "large", "huge"]}], // 字体大小
					[{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
					//   [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
					[{color: []}], // 字体颜色、字体背景颜色
					//   [{ font: [] }], // 字体种类
					[{align: []}], // 对齐方式
					["clean"], // 清除文本格式
					["image"] // 链接、图片、视频
				],
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() < Date.now() - 1000 * 60 * 60 * 24;
					},
				},
				type: '',
				message_id: ''
			};
		},
		computed: {
			postData() {
				let data = {
					message_id: this.message_id || '',
					title: this.title,
					prompt_mode: this.prompt_mode,
					target: this.target.join(','),
					content: this.content,
					status: this.status,
					release_start_time: this.time[0] / 1000 || '',
					release_end_time: this.time[1] / 1000 || ''
				};
				return data;
			},
			...mapGetters(['getUserName'])
		},
		watch: {},
		components: {datePicker},
		methods: {
			selectAll() {
				this.checkAll ? this.target = publishList : this.target = [];
			},
			selectTarget(val) {
				this.checkAll = val.length === this.pushTargetList.length;
			},
			submitInformationManage(status) {
				if (!this.title) {
					return this.$message.error('请输入标题');
				}
				if (!this.prompt_mode) {
					return this.$message.error('请选择提示方式');
				}
				if (!this.target.length) {
					return this.$message.error('请选择发布对象');
				}
				if (!this.time.length) {
					return this.$message.error('请选择发布时间');
				}
				if (!this.content.length) {
					return this.$message.error('请输入正文');
				}
				this.postData.status = status;
				if (this.postData.status === 5 && !this.reason) {
					return this.$message.error('请输入处理意见');
				}
				this.$axios.post(this.$api.g_saveInformation, this.postData).then(res => {
					let {code, msg, data} = res;
					if (code == 200) {
						this.$message.success(msg)
						this.back(true);
					} else {
						this.$message.error(msg)
					}
				}).catch(ret => {
					this.$message.error(ret.msg || "服务繁忙，请稍后再试");
				});
			},
			getInformationInfo() {
				this.$axios.post(this.$api.g_getInformationInfo, {message_id: this.message_id}).then(res => {
					let {code, msg, data} = res;
					if (code == 200) {
						this.title = data.info.title || '';
						// prompt_mode  提示方式 1首次登录2每次登录
						this.prompt_mode = data.info.prompt_mode || '';
						this.time = data.info.release_start_time && data.info.release_end_time ? [parseInt(data.info.release_start_time * 1000), parseInt(data.info.release_end_time * 1000)] : '';
						this.target = data.info.target && data.info.target.length ? data.info.target.split(',') : [];
						this.checkAll = this.target.length === this.pushTargetList.length;
						this.content = data.info.content || '';
					} else {
						this.$message.error(msg)
					}
				}).catch(ret => {
					this.$message.error(ret.msg || "服务繁忙，请稍后再试");
				});
			},
			back(isRefresh) {
				if (this.type == 'put') {
					this.$blackRoute({
						path: '/risk_rank_list',
						that: this,
						name: 'GRiskRankList',
						params: {isRefresh}
					})
				} else {
					this.$blackRoute({
						path: '/notification_list',
						that: this,
						name: 'GNotificationList',
						params: {isRefresh}
					})
				}
			},
		},
		mounted() {
			this.type = this.$route.query.type || ''
			this.message_id = this.$route.query.message_id || ''
			if (this.type == 'put') {
				setTimeout(() => {
					this.content = this.$route.query.risk_assmessment_name || ''
				}, 500)
			}
			if (this.type == 'detail' || this.type == 'edit') {
				this.getInformationInfo(this.message_id);
			}
			this.disabled = this.type == 'detail'
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/government/infoInteractionManage/notificationDetail/index.less">

</style>
